<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
			});
		</script>
		
		<style type="text/css">
			#sizeBig {
				font-size: 18px;
				font-weight: bold;
			}

			#jg {
				font-size: 20px;
				color: red;
				font-weight: bold;
				padding-left: 15px;
			}

			#kd {
				color: #808080;
				margin-top: 15px;
				padding-left: 15px;
			}

			#flexs {
				margin-top: 15px;
				padding-top: 10px;
				padding-bottom: 20px;
				background-color: #DCDCDC;
			}

			section {
				flex: 1;
				overflow-y: scroll;
			}

			#font-xq {
				margin-top: 30px;
				margin-bottom: 20px;
				font-size: 20px;
			}

			.image {
				margin-bottom: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 轮播图 -->
			<header>
				<van-icon name="arrow-left" size="30px" color="yellow" style="position: fixed;top: 20px;z-index: 1;left: 10px;"
				 @click="cc"></van-icon>
				<van-swipe :autoplay="3000">

					<van-swipe-item><img src="../img/product/1.jpg" /></van-swipe-item>
					<van-swipe-item><img src="../img/product/2.jpg" /></van-swipe-item>
				</van-swipe>
			</header>

			<!--  -->
			<section>
				<van-cell id="sizeBig" value="MIXDEMIND觅定黄色网红T恤女潮2019新款圆领短袖打底上衣法式少女"></van-cell>
				<van-row>
					<van-col span="6" id="jg">￥52.44</van-col>
				</van-row>
				<van-row type="flex" justify="space-between" id="kd">
					<van-col span="7">快递：免运费</van-col>
					<van-col span="6">销量：6840</van-col>
					<van-col span="5"></van-col>
				</van-row>
				<van-row type="flex" justify="space-around" id="flexs">
					<van-col span="6">
						<van-icon name="logistics" color="red">正品保证</van-icon>
					</van-col>
					<van-col span="6">
						<van-icon name="logistics" color="red">极速退款
					</van-col>
					<van-col span="7">
						<van-icon name="logistics" color="red">两天内发货
					</van-col>
				</van-row>
				<van-cell id="font-xq" value="商品详情"></van-cell>
				<van-row>
					<img src="../img/product/5.jpg" width="100%" />

				</van-row>
				<van-row>
					<img src="../img/product/3.jpg" width="100%" class="image" />
				</van-row>
				<van-row>
					<img src="../img/product/4.jpg" width="100%" class="image" />
				</van-row>
			</section>


			<!-- 商品导航 -->
			<van-goods-action>
				<van-goods-action-mini-btn @click='bian'>
					<van-icon :name="se" size="35px" color="red"></van-icon>
				</van-goods-action-mini-btn>
				<van-goods-action-big-btn :text="wenzi" @click="wenzide" :disabled='isdis'>
				</van-goods-action-big-btn>
				<van-goods-action-big-btn primary text="立即购买" @click="goumai">
				</van-goods-action-big-btn>
			</van-goods-action>
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					xia: 0,
					se: 'like-o',
					sese: 'like',
					wenzi: '加入购物车',
					isdis:false
				},
				created: function() {
					document.addEventListener('plusready', function() {
						var wv = plus.webview.currentWebview();
						app.xia = wv.shuju;
						console.log(app.xia);
						plus.key.addEventListener("backbutton", onback);
						function onback() {
							app.cc();
						}
					});
				},
				methods: {
					cc: function() {

						plus.webview.close("productDetails");
					},
					bian: function() {
						
						vant.Toast.success({
							forbidClick:true,
							duration:1000,
							onClose:function(){
								app.se == 'like-o' ? app.se = 'like' : app.se = 'like-o';
							}
						});
					},
					wenzide: function() {
						
						vant.Toast.success({
							message:'有了',
							forbidClick:true,
							duration:1000,
							onClose:function(){
								app.wenzi == '加入购物车' ? app.wenzi = '有了' : app.wenzi = '加入购物车';
								app.isdis='false';
							}
						});
					},
					goumai:function(){
						var pr=plus.webview.create("product.html","product",{
							zindex:1
						})
						plus.webview.show("product",'fade-in',800);
						
					}
				},
			});
		</script>

	</body>
</html>
